<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input id="queue-input" type="text">
    <p id="queue-cont">队列内容：apple-&gt;pear</p>
    <button id="in-btn">入队</button>
    <button id="out-btn">出队</button>
    <button id="font-btn">打印队头元素内容</button>
    <button id="empty-btn">判断队列是否为空</button>

    <script>
        var queue = ["apple", "pear"];

        function Queue(queue) {
            var items = queue;
            this.dequeue = function() {
                items.pop();
            }
            this.enqueue = function(item) {
                items.unshift(item);
                // items.push(item);
            }
            this.getHead = function() {
                if (items.length === 0) {
                    return null;
                }
                return items[items.length - 1];
            }
            this.isEmpty = function() {
                return items.length === 0;
            }
            this.print = function() {
                console.log(items.toString());
            }
            this.updateP = function() {
                var p = document.getElementById('queue-cont');
                p.innerHTML = '队列内容：' + items.join('->')
            }
        }
        // var myqueue = new Queue;
        // myqueue.enqueue(3);
        // myqueue.enqueue(5);
        // myqueue.enqueue(8);
        // myqueue.print();
        // console.log(myqueue.getHead())
        // myqueue.dequeue();
        // console.log(myqueue.getHead())
        // myqueue.dequeue();
        // console.log(myqueue.getHead())
        // myqueue.dequeue();
        // myqueue.print();
        // console.log(myqueue.isEmpty());
        // myqueue.enqueue(3);
        // myqueue.enqueue(5);
        // myqueue.enqueue(8);
        // myqueue.updateP();
        var btns = document.querySelectorAll('button');
        var myqueue = new Queue(queue);

        btns[0].onclick = function() {
            var value = document.getElementById('queue-input').value;
            if (value !== '') {
                myqueue.enqueue(value);
            }
            myqueue.print();
            myqueue.updateP();
        };
        btns[1].onclick = function() {
            myqueue.dequeue();
            myqueue.print();
            myqueue.updateP();
        };
        btns[2].onclick = function() {
            console.log(myqueue.getHead());
        };
        btns[3].onclick = function() {
            if (myqueue.isEmpty()) {
                console.log('队列为空');
            } else {
                console.log('队列不为空')
            }
        }
    </script>
</body>

</html>